<template>
  <div>
    <el-header>
      <el-button type="warning" plain size="default" @click="$router.back(-1)" text-color="#000">返回</el-button>
      <el-menu :default-active="activePath" class="el-menu-demo" mode="horizontal" text-color="#000" active-text-color="#EB9F9F" >
        <el-menu-item v-for="item in menu_child" :key="item.path" :index="item.path" @click="saveNavState(item.path)">{{item.name}}</el-menu-item>
      </el-menu>
      <el-button type="success" plain size="default" @click="backOut">发布</el-button>
    </el-header>

    <div class='compArea'>
      <transition name="el-zoom-in-top">
        <component v-bind:is="activePath"  :projectKey="projectKey"></component>
      </transition>
    </div>

  </div>
</template>

<script>
import edit from './form/Edit.vue'
import skin from './form/skin/Skin.vue'
import setting from './form/Setting.vue'
import publish from './form/Publish.vue'
import count from './form/Count.vue'

export default {
  components: { edit,skin,setting,publish,count },
  data() {
    return {
      activePath: 'edit',
      // currentComponent:'edit',
      menu_child: [
        { path: 'edit',name: '编辑' },
        { path: 'skin',name: '皮肤' },
        { path: 'setting',name: '设置' },
        { path: 'publish',name: '发布' },
        { path: 'count',name: '统计' }
      ],
      projectKey: this.$route.query.projectKey
    }
  },
  created () {

  },
  // watch:{
  //   activePath(value){
  //       this.currentComponent=value
  //       console.log(this.currentComponent)
  //   }
  // },
  methods: {
    saveNavState: function (activePath) {
      window.sessionStorage.setItem('activePath','/' + activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
//动画
.v-enter,.v-leave{
  opacity: 0;
  transform: translateX(-100px);
}
.v-enter-active,.v-leave-active{
  transition: all 0.8s ease;
  //position: absolute;
}

*{
  height: 100%;
}
.el-header {
  background-color: #fff;
  height: 65px !important;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 5px 0;
  position:sticky;
}



.el-button {
  margin: 0 100px;
  height: 90%;
  padding: 0 70px;
}
.el-menu{
  height: 90% !important;

  .el-menu-item{
    height: 90% !important;
    display: flex;
    justify-content: center;
    line-height: 45px;
  }
}

.el-menu.el-menu--horizontal {
  display: flex;
  justify-content: center;
  width: 70%;
  border-bottom: none;

  ul{
    height: 90%;
  }
  li {
    height: 90%;
    padding: 0 30px;
  }
}
.compArea{
  height: calc(100vh - 65px)
}
</style>
